<template>
    <div class="content-profile" v-loading="loadingProfile">
        <div class="left">
            <img class="introduction_img" src="../../assets/images/home/home_bg2.png" />
        </div>
        <div class="right">
            <div class="introduction_des" v-if="detailData">
                <div v-html="detailData.colContent" class="art-body"></div>
            </div>
        </div>
    </div>
</template>

<script>
import { getCodeById } from '@/utils/routeUtils.js'
export default {
    data() {
        return {
            query: {},
            detailData: {},
            loadingProfile: false
        }
    },
    created() {
        this.query = this.$route.query
        let colId = this.query.colId
        const nav = getCodeById(this.$store.getters.levelMenus, colId)
        console.log('getCode', this.$store.getters.levelMenus, nav, colId)
        this.getGroupInfo(nav.colCode)
    },
    methods: {
        getGroupInfo(code) {
            this.loadingProfile = true
            this.$api.group.getGroupInfoByCode(code).then((res) => {
                const data = res.data
                if (data.code == 200) {
                    this.detailData = data.data
                }
            }).finally(() => {
                this.loadingProfile = false
            })
        },
    },
}
</script>

<style lang="scss" scoped>
.content-profile {
    position: relative;
    display: flex;
    width: 100%;

    .left {
        flex-shrink: 0;
        overflow: hidden;
        height: 60vh;

        .introduction_img {
            width: 100%;
            height: 100%;
        }
    }

    .right {
        flex: 0 0 70%;
        margin-left: 50px;
    }
}
</style>
